<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增人员研发')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: select2-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-clock-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label">研发人员：</label>
                <div class="col-sm-8">
                   <!--  <input name="personId" class="form-control" type="text"> -->
                   <select class="form-control"
                   		required
                        name="personIds"
                        multiple="true"
                        data-ajax--url="/system/user/select2"
                        data-placeholder="请选择人员">
					</select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">参与项目：</label>
                <div class="col-sm-8">
                    <!-- <input name="personProjectId" class="form-control" type="text"> -->
                    <select class="form-control"
                    	required
                        name="personProjectId"
                        data-ajax--url="/system/project/select2"
                        data-placeholder="请选择项目">
					</select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">是否倒班：</label>
                <div class="col-sm-8">
                    <select name="type" class="form-control m-b">
                        <option value="0">否</option>
                        <option value="1">是</option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">打卡日期：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input id="clockdatetime" name="clockdatetime" class="form-control" placeholder="请选择打卡日期" type="text" autocomplete="off" required>
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">开始时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="startDatetime" class="form-control" placeholder="请选择上班时间" type="text" autocomplete="off" required>
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">结束时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="endDatetime" class="form-control" placeholder="请选择下班时间" type="text" autocomplete="off" required>
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">开始研发操作人员：</label>
                <div class="col-sm-8">
                    <!-- <input name="startPersionId" class="form-control" type="text"> -->
                    <select class="form-control"
                        name="startPersionId"
                        data-ajax--url="/system/user/select2"
                        data-placeholder="请选择谁帮他打上班卡">
					</select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">结束研发操作人：</label>
                <div class="col-sm-8">
                    <!-- <input name="endPersionId" class="form-control" type="text"> -->
                    <select class="form-control"
                        name="endPersionId"
                        data-ajax--url="/system/user/select2"
                        data-placeholder="请选择谁帮他打下班卡">
					</select>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: select2-js" />
    <script th:inline="javascript">
        var prefix = ctx + "system/clock"
        $("#form-clock-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
            	let ct = $('#clockdatetime').val();
            	
            	let st = $("input[name='startDatetime']").val();
            	//if(st) $("input[name='startDatetime']").val(ct + " " + st);
            	
            	let et = $("input[name='endDatetime']").val();
            	//if(et) $("input[name='endDatetime']").val(ct + " " + et);
            	
            	if(st >= et){
            		alert("结束打卡时间必须大于开始打卡时间");
            		return;
            	}
            	
                $.operate.save(prefix + "/add", $('#form-clock-add').serialize());
            }
        }

        $("input[name='startDatetime']").datetimepicker({
            format: "yyyy-mm-dd hh:ii",
            startView: 0,
            minView:0,
            maxView:2,
            autoclose: true
        });

        $("input[name='endDatetime']").datetimepicker({
            format: "yyyy-mm-dd hh:ii",
            startView: 0,
            minView:0,
            maxView:2,
            autoclose: true
        });
        $("input[name='clockdatetime']").datetimepicker({
            format: "yyyy-mm-dd",
            startView: 2,
            minView:2,
            maxView:3,
            autoclose: true
        });
        
        $("input[name='clockdatetime']").datetimepicker().on('changeDate', function(ev){
			$("input[name='startDatetime']").datetimepicker('remove');
			$("input[name='endDatetime']").datetimepicker('remove');
        	
        	$("input[name='startDatetime']").datetimepicker({
                format: "yyyy-mm-dd hh:ii",
                startView: 0,
                minView:0,
                maxView:2,
                autoclose: true,
                initialDate: new Date(ev.date.valueOf())
            });
        	
            $("input[name='endDatetime']").datetimepicker({
                format: "yyyy-mm-dd hh:ii",
                startView: 0,
                minView:0,
                maxView:2,
                autoclose: true,
                initialDate: new Date(ev.date.valueOf())
            });
        });
    </script>
</body>
</html>